<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <!-- <HelloWorld/> -->
    <!-- <div class="el-menu-box">
      <el-menu
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :default-active="activeIndex"      
      router
    >
      <NavMenu :navMenus="menuData"></NavMenu>
    </el-menu>
    </div> -->

    <!-- <div>
      <img
          class="previewer-demo-img"
          v-for="(item, index) in list"
          :src="item.src"
          width="100"
          @click="show(index)"
          :key="index"
        />
        <Previewer ref="refpreviewer" :list="list" :options="options"> </Previewer>
    </div> -->

      <!-- <viewer  :images="images"
              @inited="inited"
              class="viewer" ref="viewer"
      >
        <template scope="scope">
          <img v-for="src in scope.images" :src="src" :key="src">
        </template>
      </viewer>
      <button type="button" @click="show">Show</button>
      <button type="button" @click="add">add</button> -->

      <!-- <vueCropper></vueCropper> -->
      <update-scheme></update-scheme>
    <!-- <MulSearcher></MulSearcher> -->
  <!-- <test></test> -->
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
import NavMenu from "./components/NavMenu";
import 'viewerjs/dist/viewer.css'
import Viewer from "v-viewer/src/component.vue"
import vueCropper from './components/vueCropper'
import UpdateScheme from './components/UpdateScheme.vue'

import MulSearcher from './components/MulSearcher'
import Test from './components/text'

export default {
  name: 'App',
  data(){
    return {activeIndex: "aa",
      menuData:[
        {
          //一级
          entity: {
            id: 0,
            name: "aa",
            icon: "el-icon-message",
            alias: "一级菜单AAA"
          }
        },
        {
          //一级
          entity: {
            id: 1,
            name: "systemManage",
            icon: "el-icon-message",
            alias: "两级菜单111"
          },
          //二级
          childs: [
            {
              entity: {
                id: 3,
                name: "authManage",
                icon: "el-icon-loading",
                alias: "权限管理",
                value: { path: "/hello" }
              }
            },
            {
              entity: {
                id: 4,
                name: "roleManage",
                icon: "el-icon-bell",
                alias: "角色管理",
                value: "/system/role"
              }
            },
            {
              entity: {
                id: 2,
                name: "menuManage",
                icon: "el-icon-edit",
                alias: "菜单管理",
                value: "/system/menu"
              }
            },
            {
              entity: {
                id: 5,
                name: "groupManage",
                icon: "el-icon-mobile-phone\r\n",
                alias: "分组管理",
                value: "/system/group"
              }
            }
          ]
        },
        {
          //一级
          entity: {
            id: 6,
            name: "userManage",
            icon: "el-icon-news",
            alias: "三级菜单"
          },
          //二级
          childs: [
            {
              entity: {
                id: 7,
                name: "accountManage",
                icon: "el-icon-phone-outline\r\n",
                alias: "帐号管理",
                value: ""
              },
              //三级
              childs: [
                {
                  entity: {
                    id: 14,
                    name: "emailManage",
                    icon: "el-icon-sold-out\r\n",
                    alias: "邮箱管理",
                    value: "/content/email"
                  }
                },
                {
                  entity: {
                    id: 13,
                    name: "passManage",
                    icon: "el-icon-service\r\n",
                    alias: "密码管理",
                    value: "/content/pass"
                  }
                }
              ]
            },
            {
              entity: {
                id: 8,
                name: "integralManage",
                icon: "el-icon-picture",
                alias: "积分管理",

                value: "/user/integral"
              }
            }
          ]
        },
        {
          //一级
          entity: {
            id: 40,

            name: "contentManage",
            icon: "el-icon-rank",
            alias: "四级菜单"
          },
          //er级
          childs: [
            {
              entity: {
                id: 41,
                name: "classifyManage2",
                icon: "el-icon-printer",
                alias: "分类管理"
              },
              //三级
              childs: [
                {
                  entity: {
                    id: 42,
                    name: "classifyManage3",
                    icon: "el-icon-printer",
                    alias: "分类管理"
                  },
                  //四级
                  childs: [
                    {
                      entity: {
                        id: 43,
                        name: "classifyManage4",
                        icon: "el-icon-printer",
                        alias: "分类管理",
                        value: "/content/classify"
                      }
                    }
                  ]
                }
              ]
            }
          ]
        }
      ],
      list: [
        {
          msrc:
            'https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rjyub5bj30go0b40wc.jpg',
          src:
            'https://tva1.sinaimg.cn/large/006y8mN6ly1g95rjyub5bj30go0b40wc.jpg',
          w: 600,
          h: 400
        },
        {
          msrc:
            'https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rmt8pq4j30go0b4n28.jpg',
          src:
            'https://tva1.sinaimg.cn/large/006y8mN6ly1g95rmt8pq4j30go0b4n28.jpg',
          w: 600,
          h: 400
        },
        {
          msrc:
            'https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rn3grt6j30go0b4n0w.jpg',
          src:
            'https://tva1.sinaimg.cn/large/006y8mN6ly1g95rn3grt6j30go0b4n0w.jpg',
          w: 600,
          h: 400
        }
      ],
      images: ["http://192.168.1.5:4080/upload/00000000-0000-0000-0000-000000000000/6d5c2943-0926-437c-b69a-ae87da3c397a.jpg","http://192.168.1.5:4080/upload/00000000-0000-0000-0000-000000000000/849bf258-82c8-4da0-be2b-72463b4457a9.jpg"]
    }
  },
  components: {
    HelloWorld,NavMenu,Viewer,vueCropper,UpdateScheme,MulSearcher,Test
  },
  methods: {
    inited (viewer) {
      this.$viewer = viewer
    },
    show () {
      this.$viewer.show()
    },
    add(){
      this.images.push("http://192.168.1.5:4080/upload/00000000-0000-0000-0000-000000000000/6d5c2943-0926-437c-b69a-ae87da3c397a.jpg")
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
/* 水平样式 */
 .el-menu--horizontal>div>.el-submenu {
    float: left;
}
/* 一级菜单的样式 */
.el-menu--horizontal>div>.el-menu-item {
    float: left;
    height: 60px;
    line-height: 60px;
    margin: 0;
    border-bottom: 2px solid transparent;
    color: #909399;
}
/* 解决下图1 下拉三角图标 */
.el-menu--horizontal>div>.el-submenu .el-submenu__icon-arrow {
    position: static;
    vertical-align: middle;
    margin-left: 8px;
    margin-top: -3px;
}
/* 解决下图2 无下拉菜单时 不对齐问题 */
.el-menu--horizontal>div>.el-submenu .el-submenu__title {
    height: 60px;
    line-height: 60px;
    border-bottom: 2px solid transparent;
    color: #909399;
}
</style>
